<div ng-init="loadSettings()"></div>
<form class="needs-validation" novalidate>
    <h1 class="lead">Hi there! We're setting up your website.
    </h1>
    <hr>
    <!-- Thanks for being a part of the
                    <strong>mixcore</strong> lovers!  
        <p class="mb-2">
            Please fill in following information below:
        </p>-->
    <div class="intruction-labels">
        <div class="form-group">
            <label>
                Site Title
            </label>
            <input type="text" ng-model="initCmsModel.siteName" class="form-control" required>
        </div>
        <div class="form-group">
            <label>
                1st Culture & Language
            </label>
            <select id="inputState" class="form-control custom-select custom-select-sm"
                ng-options="item as item.fullName for item in settings.cultures track by item.specificulture"
                ng-model="initCmsModel.culture">
            </select>
        </div>
        <hr class="mt-5">
        <div class="form-group row">
            <strong class="col-8 strong">
                Database Information
            </strong>
            <div class="col-4 text-right">
                <span style="cursor: pointer;" ng-click="initCmsModel.isUseLocal=!initCmsModel.isUseLocal">
                    <span data-toggle="tooltip" data-placement="top" title="Click to change to remote database."
                        style="text-decoration: underline;" ng-if="initCmsModel.isUseLocal">local<i
                            class="fa fa-angle-down ml-1"></i></span>
                    <span data-toggle="tooltip" data-placement="top" title="Click to change to local database."
                        style="text-decoration: underline;" ng-if="!initCmsModel.isUseLocal">remote<i
                            class="fa fa-angle-down ml-1"></i></span>
                </span>
            </div>

        </div>
        <div class="form-group" ng-show="!initCmsModel.isUseLocal">
            <label>Server</label>
            <select class="custom-select form-control" ng-options="item as item.text for item in settings.providers"
                ng-model="dbProvider" ng-change="updateDbProvider()">
            </select>
        </div>
        <mssql-info ng-if="!initCmsModel.isUseLocal && dbProvider.value=='MSSQL'" init-cms-model="initCmsModel">
        </mssql-info>
        <mysql-info ng-if="!initCmsModel.isUseLocal && dbProvider.value=='MySQL'" init-cms-model="initCmsModel">
        </mysql-info>
        <mssql-local-info ng-if="initCmsModel.isUseLocal" init-cms-model="initCmsModel">
        </mssql-local-info>
    </div>

    <hr>
    <div class="text-right">
        <button ng-if="!initCmsModel.isUseLocal" ng-click="initCms();" class="btn btn-primary" style="min-width:200px"
            ng-disabled="!initCmsModel.databaseServer || !initCmsModel.databaseName || !initCmsModel.databaseUser || !initCmsModel.culture">
            <span
                ng-if="!initCmsModel.databaseServer || !initCmsModel.databaseName || !initCmsModel.databaseUser || !initCmsModel.culture">Next
                <i class="fa fa-angle-right"></i></span>
            <span
                ng-if="initCmsModel.databaseServer && initCmsModel.databaseName && initCmsModel.databaseUser  && initCmsModel.culture">Connect</span>
        </button>
        <button ng-if="initCmsModel.isUseLocal" ng-click="initCms();" class="btn btn-primary" style="min-width:200px"
            ng-disabled="!initCmsModel.sqliteDbConnectionString || !initCmsModel.localDbName">
            <span ng-if="!initCmsModel.sqliteDbConnectionString || !initCmsModel.localDbName">Next <i
                    class="fa fa-angle-right"></i></span>
            <span ng-if="initCmsModel.sqliteDbConnectionString && initCmsModel.localDbName ">Next <i
                    class="fa fa-angle-right"></i></span>
        </button>
    </div>
</form>